<template>
  <div class="register-wrapper">
    <div class="register-box">
      <div class="register-logo">
        <div class="logo-left"></div>
        <div class="logo-middle">AI FORCE</div>
        <div class="logo-right"></div>
      </div>
      <div class="register-content">
        <div class="register-method">注册你的账号</div>
        <div class="user-input-wrapper input-wrapper">
          <div class="input-box">
            <input
              type="text"
              class="user-input input"
              placeholder="请输入用户名"
            />
          </div>
        </div>
        <div class="ph-input-wrapper input-wrapper">
          <div class="input-box">
            <input
              type="text"
              class="ph-input input"
              placeholder="请输入手机号码"
            />
          </div>
        </div>
        <div class="key-input-wrapper input-wrapper">
          <span class="visible" @click="isVisible(0)">
            <i :class="this.iClass0"></i>
          </span>

          <div class="input-box">
            <input
              :type="this.inputType0"
              class="key-input input"
              placeholder="请输入密码"
            />
          </div>
        </div>
        <div class="sure-key-input-wrapper input-wrapper">
          <span class="visible" @click="isVisible(1)">
            <i :class="this.iClass1"></i>
          </span>

          <div class="input-box">
            <input
              :type="this.inputType1"
              class="sure-key-input input"
              placeholder="请输入密码"
            />
          </div>
        </div>
        <div class="register-btn-wrapper">
          <div class="register-btn" @click="register">注册</div>
        </div>
        <div class="more-select">
          <div class="jump-wrapper">
            <div class="jumpRegister jump" @click="jumpLogin()">登录</div>
            <div>|</div>
            <div class="jumpHomepage jump" @click="jumpHomepage()">
              回到首页
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="warn-wrapper">
      <div class="little-point"></div>
      <span class="warn-info">{{ this.warning }}</span>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: "register",
  data() {
    return {
      visibleFlag: [-1,-1], //俩个密码框是否可视的判断
      iClass0: "fas fa-eye",
      inputType0: "password",
      iClass1: "fas fa-eye",
      inputType1: "password",
      warning:""    //注册出问题的反馈
    };
  },
  methods: {
    // 实现密码框的可视与否
    isVisible(x) {
      this.visibleFlag[x] = -this.visibleFlag[x];
      if(x==0){
        if (this.visibleFlag[x] == 1) {
        (this.iClass0 = "fa fa-eye"), (this.inputType0 = "text");
      } else {
        (this.iClass0 = "fas fa-eye-slash"), (this.inputType0 = "password");
      }
      }else{
        if (this.visibleFlag[x] == 1) {
        (this.iClass1 = "fa fa-eye"), (this.inputType1 = "text");
      } else {
        (this.iClass1 = "fas fa-eye-slash"), (this.inputType1 = "password");
      }
      }
    },
    jumpLogin() {
      this.$router.push({
        name: "login",
      });
    },
    jumpHomepage() {
      this.$router.push({
        name: "homepage",
      });
    },
    warn() {
      let warnInfo = document.getElementsByClassName("warn-wrapper")[0];
      warnInfo.style.right = 230 + "px";
      let t=setTimeout(function () {
          warnInfo.style.right = -250 + "px";
          clearTimeout(t);
      }, 5000);
    },
    register(){
      // 正则验证，判断是否符合要求
      let user=document.getElementsByClassName("user-input")[0].value
      let phone = document.getElementsByClassName("ph-input")[0].value;
      let key = document.getElementsByClassName("key-input")[0].value;
      let sureKey=document.getElementsByClassName("sure-key-input")[0].value
      let rightUser=/^.{4,10}$/;
      let rightPhone = /^1[34578][0-9]{9}$/;
      let rightKey = /^.{6,20}$/;
      if(!rightUser.test(user)) {
        console.log(user);
        this.warning="请输入4-10字符用户名";
        this.warn();
        return 0
      }
      else if(!rightPhone.test(phone)) {
        this.warning = "请输入正确的11位手机号码";
        this.warn();
        return 0;
      } 
      else if (!rightKey.test(key)) {
        this.warning = "请输入6-20位有效密码";
        this.warn();
        return 0;
      }
      else if(sureKey!=key){
        this.warning = "俩次输入的密码不一致";
        this.warn();
        return 0;
      }
      // 通过正则验证后发送请求
      else {
        axios({
          method: "POST",
          url: "/api/user/register",
          data: {
            password:key,
            phone,
            username:user
          },
        }).then((response)=>{
          if(response.data.success){
            this.$router.push({
              name:'login',
              params:{
                message:"注册成功，赶快登录吧"
              }
            })
          }else{
            this.warning=response.data.msg;
            this.warn()
          }
        });
      }
      
    }
  },
};
</script>
<style>
.register-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(140, 48, 245);
  width: 100%;
  height: 100vh;
  color: rgb(150, 155, 171);
  position: relative;
  overflow: hidden;
}
.register-logo {
  color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 2.55rem;
}

.register-content {
  background-color: rgb(255, 255, 255);
  width: 30rem;
  border-radius: 20px;
  padding-top: 3.9rem;
  padding-bottom: 1.2rem;
  box-shadow: rgb(0 0 0 / 30%) 2px 2px 20px 2px;
}
.register-method {
  text-align: center;
  margin-bottom: 2rem;
}


.register-btn {
  width: 67%;
  height: 2.5rem;
  background: rgb(140, 48, 245);
  border-radius: 0.2rem;
  cursor: pointer;
  margin: 0px auto 2rem;
  font-weight: 500;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>